import React, { ReactElement } from 'react'
interface columnsProps {
  width?: number
  label: string
  key: string
  render?: (v: any) => ReactElement
}
interface TableProps {
  columns: columnsProps[]
  data: any[],
  width?: number
}
class GzwTable extends React.Component<TableProps, any> {
  constructor(props:TableProps) {
    super(props)
  }
  render() {
    const { columns, width = 0, data } = this.props
    return (
      <div className='gzwTable' style={{ width: `${width + 2}px` }}>
        <div className='gzwTableContent'>
          <div className='gzwTr' style={{ minWidth: '100%', paddingLeft: columns.length > 1 ? `${columns[0]?.width}px` : '0px' }}>
            {
              columns.map((v: columnsProps, index) => <div className='gzwTd' style={{ width: v.width || 'auto' }} key={index}> {
                typeof v.render === 'function' ? v.render(v.label) : v.label
              }</div>)
            }
          </div>
          {
            data.map((raw:any, index) => (<div className='gzwTr' key={index}>
              {
                columns.map((value, i) => (<div className='gzwTd' style={{ width: value.width || 'auto' }} key={i}>
                  { typeof value.render === 'function' ? value.render(raw) : raw[value.key] }
                </div>))
              }
            </div>))
          }
        </div>
      </div>
    )
  }
}

export default GzwTable
